<template>
	<view class="relative bg-white" style="min-height: 100vh;">
		<view style="z-index:0;position:absolute;left:-17px;right:-17px;top:-17px;bottom:-17px;height:280px;">
			<image class="w-full h-full" mode="aspectFill" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/agentApply_bg.png"></image>
		</view>
		<uni-nav-bar ref="navBar" fixed statusBar title="" :border="false" backgroundColor="transparent" @clickLeft="goBack">
			<template v-slot:left>
				<image class="size-32" src="@/static/svg/icon-back.svg" />
			</template>
			<view class="flex center w-full fs-16"><text class="text-white">经纪人</text></view>
		</uni-nav-bar>
		<view class="mx-16 overflow-auto" style="margin-top: 200px;">
			<view class="flex item-center">
				<image class="radius-16" style="width:32px;height:32px;flex-shrink: 0;" :src="info.avatar"></image>
				<view class="fs-16 text-color-regular font-semibold ml-8">{{info.name}}</view>
			</view>
			<view class="mt-20 radius-12 fs-14">
				<view class="flex item-center mb-16">
					<text class="text-color-regular" style="width:80px;">姓名：</text>
					<input v-model="formData.username" class="flex-1 bg-default px-12 radius-12" style="height: 36px;" placeholder="请输入姓名" placeholder-class="text-color-hint" />
				</view>
				<view class="flex item-center mb-16">
					<text class="text-color-regular" style="width:80px;">手机号：</text>
					<input v-model="formData.mobile" class="flex-1 bg-default px-12 radius-12" style="height: 36px;" placeholder="请输入手机号" placeholder-class="text-color-hint" />
				</view>
			</view>
			<view class="fs-14 leading-20">
				<text class="text-color-regular font-semibold">申请说明：</text>
			</view>
			<view class="mt-8 radius-12 px-12 py-16 bg-default mb-16">
				<textarea class="w-full fs-14" v-model="formData.applyReason" maxlength="200" placeholder="请输入申请理由(选填)"></textarea>
			</view>
		</view>
		<template #footer>
			<view class="mx-12 mb-12 radius-8 h-46 flex center text-white fs-16" :class="enableSubmit? 'bg-primary' : 'bg-disabled'" @click="toSubmit">提交</view>
		</template>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import {computed,ref,unref,watch} from 'vue'
	import { agentBindApply } from '@/pagesH/api/subscribe.js'
	import { useUserStore } from '@/stores/modules/user.js'
	const userStore = useUserStore()
	
	const navBar = ref(null)
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets && uni.getSystemInfoSync().safeAreaInsets.bottom || 0
	})
	const goBack = () => {
		if(getCurrentPages().length === 1) {
			uni.reLaunch({
				url: '/pages/home/home'
			})
			return
		}
		uni.navigateBack()
	}
	const info = ref({})
	const formData = ref({
		businessId: '',
		code: '',
		applyReason: '',
		username: '',
		mobile: ''
	})
	const enableSubmit = computed(() => {
		return formData.value.username && formData.value.mobile
	})
	const loading = ref(true)
	const currentData = ref({})
	const popup = ref()
	const detail = ref({})
	const toSubmit = () => {
		agentBindApply(formData.value).then(res => {
			uni.showToast({
				icon: 'none',
				title: res.message
			})
			uni.$emit('updateHomePage')
			setTimeout(() => {
				goBack()
			}, 1000)
		})
	}
	onLoad((query) => {
		formData.value.businessId = query.id
		formData.value.code = query.code
		info.value = query
	})
</script>
<style scoped lang="scss">
	.product-item{
		width: 165px;
		.img-wrapper{
			width: 165px;
			height: 165px;
			background-image: url("https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-couponItem.png");
			background-repeat: no-repeat;
			background-size: 100%;
		}
		.content{
			height: 121px;
			background: #F5F4F6;
			border-radius: 0px 0px 8px 8px;
		}
	}
	.img-avatar{
		width: 24px;
		height: 24px;
		border-radius: 50%;
	}
	.img-product{
		width: 165px;
		height: 165px;
		border-radius: 8px 8px 0px 0px;
	}
	.coupon-item{
		background-image: url("https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-coupon2.png");
		background-repeat: no-repeat;
		background-size: 100%;
		.left{
			width: 68px;
		}
		.right{
			width: 163px;
		}
	}
	.goods-item{
		image{
			width: 80px;
			height: 80px;
			border-radius: 8px 0px 0px 8px;
			flex-shrink: 0;
		}
		border-radius: 12px 12px 12px 12px;
		background: #FFF0EA;
	}
	.two-lines-ellipsis {
		width: 135px;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.w-pop {
		background: #fffff;
		border-radius: 8px;
		padding: 16px;
		width: 280px;
	}
	.base-title {
		font-size: 20px;
		font-weight: 600;
	}
	
	.item-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 20px;
	}
	
	.label-box {
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: rgba(51, 51, 51, 1);
		margin: 6px 0;
	}
	
	.inp-box {
		background: rgba(245, 245, 245, 1);
		height: 32px;
		border-radius: 12px;
		padding: 0 10px;
		line-height: 32px;
		border: 1px solid rgba(245, 245, 245, 1);
		width: 100px;
		&.unactive {
			border-color: #FA4543;
		}
	}
	
	.btn-box {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		margin-top: 20px;
		line-height: 30px;
	}
	
	.cancal-btn {
		width: 50%;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		color: rgba(51, 51, 51, 0.6);
		border-right: 1px solid rgba(0, 0, 0, 0.1);
	}
	
	.submit-btn {
		width: 100%;
		font-family: PingFang SC;
		font-size: 12px;
		text-align: center;
		color: #fff;
		background: #FA4543;
		border-radius: 4px;
		padding: 6px 0;
		&.disabled{
			color: #FA4543;
			background: #fff;
		}
	}
	.share-btn{
		width: 64px;
		height: 25px;
		line-height: 23px;
		font-size: 12px;
		border-radius: 8px;
		background: #FA4543;
		color: #ffffff;
		text-align: center;
		&.subscribe{
			color: #FA4543;
			border: 1px solid #FA4543;
			background: none;
		}
	}
</style>